import { Col, Form, Input, message, Modal, Radio, Row } from 'antd'
import { useSelector } from 'react-redux'
import type { DataType } from './interface'
import { useEffect } from 'react'
import { editUserData } from '../../api/users.ts'

interface UserFormProps {
  show: boolean
  title: string
  loadData: () => void
  handleCloseUserForm: () => void
}

export default function UserForm(props: UserFormProps) {
  const [form] = Form.useForm()
  const { userData } = useSelector((state: any) => state.userSlice)
  const { show, title, loadData, handleCloseUserForm } = props

  useEffect(() => {
    if (show) {
      if (title === '新增企业') {
        form.resetFields()
      } else if (userData) {
        form.setFieldsValue(userData)
      }
    }
  }, [show, title, userData, form])

  const handleOk = async () => {
    form
      .validateFields()
      .then(async () => {
        const res = await editUserData(userData)
        if (res.code === 200) {
          message.success('操作成功')
          handleCloseUserForm()
          loadData()
        } else {
          message.error('操作失败')
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
  return (
    <>
      <Modal
        width={800}
        title={title}
        open={show}
        onOk={handleOk}
        onCancel={handleCloseUserForm}
        destroyOnHidden={true}
      >
        {show && (
          <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
            <Row>
              <Col span={12}>
                <Form.Item<DataType>
                  label="客户名称"
                  name="name"
                  rules={[{ required: true, message: '请输入客户名称' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item<DataType>
                  label="联系电话"
                  name="tel"
                  rules={[{ required: true, message: '请输入联系电话' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item<DataType>
                  label="经营状态"
                  name="status"
                  rules={[{ required: true, message: '请选择经营状态' }]}
                >
                  <Radio.Group>
                    <Radio value={1}>营业中</Radio>
                    <Radio value={2}>暂停营业</Radio>
                    <Radio value={3}>已关闭</Radio>
                  </Radio.Group>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item<DataType>
                  label="所属行业"
                  name="business"
                  rules={[{ required: true, message: '请输入所属行业' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item<DataType> label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱' }]}>
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item<DataType>
                  label="统一信用代码"
                  name="creditCode"
                  rules={[{ required: true, message: '请输入统一信用代码' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item<DataType>
                  label="工商注册号"
                  name="industryNum"
                  rules={[{ required: true, message: '请输入工商注册号' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item<DataType>
                  label="组织机构代码"
                  name="organizationCode"
                  rules={[{ required: true, message: '请输入组织机构代码' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <Form.Item<DataType>
                  label="法人名"
                  name="legalPerson"
                  rules={[{ required: true, message: '请输入法人名' }]}
                >
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        )}
      </Modal>
    </>
  )
}
